<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="isShowDialog" @close="closeDialog" @open="openDialog">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">【题型】:{{ dataObj.questionType | tranQuestionType }}</el-col>
        <el-col :span="6">【编号】:{{ dataObj.id }}</el-col>
        <el-col :span="6">【难度】:{{ dataObj.difficulty | tranDifficulty }}</el-col>
        <el-col :span="6">【标签】:{{ dataObj.tags }}</el-col>
      </el-row>
      <el-row type="flex" class="row-bg" style="margin-top:20px;">
        <el-col :span="6">【学科】:{{ dataObj.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ dataObj.directoryName }}</el-col>
        <el-col :span="6">【方向】:{{ dataObj.direction }}</el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>
          【题干】:
        </el-col>
        <el-col>
          <div style="color:blue;" v-html="dataObj.question" />
        </el-col>
        <el-col>
          {{ dataObj.questionType | tranQuestionType }} 选项：（以下选中的选项为正确答案）
          <div v-for="item in options" :key="item.id">
            <el-radio
              v-if="dataObj.questionType==='1'"
              :value="item.isRight"
              :label="1"
            >{{ item.title }}
            </el-radio>
            <el-checkbox
              v-if="dataObj.questionType==='2'"
              :value="item.isRight===1 ? true : false"
            >{{ item.title }}
            </el-checkbox>
          </div>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col>
          【参考答案】：
          <el-button type="danger" @click="showVideo=!showVideo">
            视频解析
          </el-button>
        </el-col>
        <div v-if="showVideo">
          <video :src="dataObj.videoURL" controls autoplay loop muted style="width:100%" />
        </div>
      </el-row>
      <hr>
      <div>
        【答案解析】：  <el-link type="info">http://www.baidu.com</el-link>
      </div>
      <hr>
      <div>
        【题目备注】：  <el-link type="info">http://www.baidu.com</el-link>
      </div>
      <el-row type="flex" class="row-bg" justify="center" style="margin-top:30px">
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="closeDialog">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsPreview',
  // 格式化数据
  filters: {
    // 题型
    tranQuestionType(val) {
      if (val) return questionType.find(item => item.value === +val).label
    },
    // 难度
    tranDifficulty(val) {
      if (val) return difficulty.find(item => item.value === +val).label
    }
  },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    rowQuestion: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dataObj: {},
      options: [],
      showVideo: false
    }
  },

  methods: {
    // 关闭对话框
    closeDialog() {
      this.$emit('update:isShowDialog', false)
    },
    openDialog() {
      // console.log(this.rowQuestion)
      // this.isShowDialog = true
      this.getQuestionDetail()
    },
    // 获取题目详情
    async getQuestionDetail() {
      const { data } = await detail(this.rowQuestion)
      console.log(data, 111)
      this.dataObj = data
      this.options = data.options
    }

  }
}
</script>

<style scoped lang='less'></style>
